import React, { Component, Fragment } from "react";
// antd
import { Table, Button, Col, Pagination, Form, Input } from "antd";
// http
import http from '../../utils/request';
import { LeftOutlined } from '@ant-design/icons';
// router
import { Link } from "react-router-dom";
import {  pagination_size_option } from "../../utils/common"

class DomainRecord extends Component {
    constructor(props){
        super(props)
        this.state = {
            loading: false,

            // 分页
            total: '',
            page: 1,
            page_number: 10,
            domain_name: null,
            search_record_name: '',

            // 表格
            dataSource: [],
            columns: [
                {title: "域名", dataIndex: "domain_name", key: "domain_name"},
                {title: "记录类型", dataIndex: "record_type", key: "record_type"},
                {title: "记录名称", dataIndex: "record_name", key: "record_name"},
                {title: "记录值", dataIndex: "record_value", key: "record_value"},
                {title: "记录状态", dataIndex: "status", key: "status"},
                {title: "TTL", dataIndex: "ttl", key: "ttl"},
                {title: "权重", dataIndex: "weight", key: "weight"},
                {title: "线路", dataIndex: "line", key: "line"},
                {title: "到期", dataIndex: "expire_time", key: "expire_time"},

            ],
        }
    }

    componentDidMount() {
        const domain_name = this.props.location.search.split('domain_name=')[1]
        this.loadData(domain_name)
    }

    loadData = (domain_name) => {
        this.setState({
            loading: true,
            domain_name: domain_name
        })
        const requestData = {
            'page': this.state.page,
            'limit': this.state.page_number,
            'domain_name': domain_name,
            'record_name__contains': this.state.search_record_name,
        }
        // 获取列表
        http.get('/cloud/domain/' + domain_name, {params: requestData}).then(response=>{
            this.setState({
                dataSource: response.data.data.items,
                total: response.data.data.pages.total,
                loading: false
            })
        }).catch()
    }

    // 切换每页数量
    onChangeSizePage = (page, page_number) => {
        this.setState({
            page: page,
            page_number: page_number,
        }, () => {
            this.loadData(this.state.domain_name)
        })
    }    

     /** 搜索 */
    onFinishSearch = (data) => {
        this.setState({
            search_record_name: data.record_name ? data.record_name : null,
            page: 1
        })
        this.loadData(this.state.domain_name)
    }

    render(){
        const { loading, columns, dataSource, page, total } = this.state
        const rowSelection = {
            onChange: this.onCheckbox
        }

        var myStyle = {margin: '20px'}
        var myStyle1 = {margin: '10px', float: 'right'}
        return (
            <Fragment>
                <Link to="/index/cmdb/domain/index">
                    <LeftOutlined style={{ fontSize: '24px', marginTop: '15px', marginBottom: '15px' }} />
                </Link>

                <Form layout="inline" onFinish={this.onFinishSearch}>  
                    <Form.Item label="记录名称" name="record_name">
                        <Input placeholder="请输入记录名称"  />
                    </Form.Item>           

                    <Form.Item shouldUpdate={true}>
                        <Button type="primary" htmlType="submit">搜索</Button>
                    </Form.Item>
                </Form>

                <div style={myStyle1}><Button type="primary"></Button></div>

                <Table
                    size="small"
                    pagination={false} 
                    rowSelection={rowSelection} 
                    rowKey="id" 
                    columns={columns} 
                    dataSource={dataSource}
                    loading={loading}
                    scroll={{ y: 600, x: 900 }}
                >
                </Table>

                <div style={myStyle}>
                    <Col span={16}>
                        <Pagination
                            onChange={this.onChangeSizePage}
                            current={page}
                            total={total}
                            pageSizeOptions={pagination_size_option}
                            showSizeChanger
                            showQuickJumper
                            showTotal={total => `Total ${total} items`}
                        />
                    </Col>
                </div>
            </Fragment>
        )
    }
}

export default DomainRecord;